<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/bootstrap.css" />
    <link rel="stylesheet" href="./css/bootstrap-icons.css" />
    <link rel="stylesheet" href="./css/sty.css">
    <script src="./js/bootstrap.bundle.js"></script>
    <script src="./js/vue.js"></script>
    <title>KFC-购物车</title>

	<style>
		#scar h1{
			text-align: center;
		}
		#scar table{
			width: 100%;
			margin: 0 auto;
			/* border:1px solid gray; */
			/* 让表格和单元格的边框合并 */
			border-collapse: collapse;
		}
		#scar td,th{
			border:1px solid gray;
			text-align: center;
		}
		#scar #total>td{
			text-align: center;
		}
		#scar img{
			width: 150px;
		}
    #jiesuan td,th{
      padding: 10px 20px;
    }
    #jiesuan span {
      margin: 0 10px;
    }
    .shang input{
      border-radius: 5px;
      background-color: rgb(238, 59, 27);
      border: 1px solid transparent;
      padding: 5px 10px;
      color: white;
    }
    .shang input:hover{
      background-color: orange;
    }
    .xiamian:hover {
      background-color: orange;
    }

	</style>
	
  </head>
  <body>
    <!-- 导航栏 -->
    <nav class="my-nav navbar navbar-expand-lg py-3 fixed-top">
      <div class="container">
        <!-- logo -->
        <a class="logo" href="./user.html"><img src="./img/LOGO.png" src="index.html"></a>
        <!-- 小菜单 -->
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#menu">
          <img src="./img/tong.svg" width="40px"></img>
        </button>

        <!-- 大菜单 -->
        <div class="collapse navbar-collapse justify-content-end" id="menu">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link " href="index.html" >首页</a>    
            </li>
            <li class="nav-item">
              <a class="nav-link " href="about.html" >关于KFC</a>
            </li>
            <li class="nav-item active">
              <a class="nav-link " href="scar.html" >购物车</a>
            </li>
            <li class="nav-item">
              <a class="nav-link " href="login.html" >登录</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>



	<!-- 购物车 -->
<div id="scar">
	<div class="container">
    <h1 style="padding:30px 0;">我们的菜单</h1>
    <table class="shang">
      <tr>
        <th>商品名称</th>
        <th>售价</th>
        <th>样式</th>
        <th>加入购物车</th>
      </tr>
      <tr>
        <td>CHICKEN BUCKET</td>
        <td>30</td>
        <td><img src="img/Food_09.png" alt="" /></td>
        <td>
          <input type="button" value="加入购物车" />
        </td>
      </tr>
      <tr>
        <td>DRUM & THIGH COMBO</td>
        <td>20</td>
        <td><img src="img/kfc-2BWCombo.png" alt=""></td>
        <td>
          <input type="button" value="加入购物车" />
        </td>
      </tr>
      <tr>
        <td>DRUM & THIGH BIG BOX</td>
        <td>25</td>
        <td><img src="img/kfc-2pcBigBox.png" alt=""></td>
        <td>
          <input type="button" value="加入购物车" />
        </td>
      </tr>
      <tr>
        <td>NASHVILLE HOT TENDERS COMBO</td>
        <td>20</td>
        <td><img src="img/kfc-3pcNHTendersCombo.png" alt=""></td>
        <td>
          <input type="button" value="加入购物车" />
        </td>
      </tr>
	  <tr>
        <td>TENDERS COMBO</td>
        <td>18</td>
        <td><img src="img/kfc-4TendersCombo.png" alt=""></td>
        <td>
          <input type="button" value="加入购物车" />
        </td>
      </tr>
	  <tr>
        <td>5PC TENDERS BOX</td>
        <td>20</td>
        <td><img src="img/kfc-5pcTendersBox.png" alt=""></td>
        <td>
          <input type="button" value="加入购物车" />
        </td>
      </tr>
	  <tr>
        <td>BIG TENDERS MEAL/td>
        <td>20</td>
        <td><img src="img/kfc-8pcTendersMeal-test.png" alt=""></td>
        <td>
          <input type="button" value="加入购物车" />
        </td>
      </tr>
	  <tr>
        <td>CHICKEN LITTLE</td>
        <td>29</td>
        <td><img src="img/kfc-ChLtlCombo.png" alt=""></td>
        <td>
          <input type="button" value="加入购物车" />
        </td>
      </tr>
	  <tr>
        <td>CHICKEN SANDWICH BOX</td>
        <td>30</td>
        <td><img src="img/kfc-cknsndbigbox.png" alt=""></td>
        <td>
          <input type="button" value="加入购物车" />
        </td>
      </tr>
	  <tr>
        <td>TENDERS MEAL</td>
        <td>38</td>
        <td><img src="img/kfc-new12pcTendersMeal.png" alt=""></td>
        <td>
          <input type="button" value="加入购物车" />
        </td>
      </tr>
	  <tr>
        <td>SANDWICH TAILGATE BUNDLE</td>
        <td>69</td>
        <td><img src="img/kfc-sandwichandsidesmeal.png" alt=""></td>
        <td>
          <input type="button" value="加入购物车" />
        </td>
      </tr>
	  <tr>
        <td>TOUCHDOWN TENDERS & SANDWICHES MEAL</td>
        <td>79</td>
        <td><img src="img/kfc-sandwichandtendersmeal.png" alt=""></td>
        <td>
          <input type="button" value="加入购物车" />
        </td>
      </tr>
	  <tr>
        <td>TENDERS FILL UP</td>
        <td>20</td>
        <td><img src="img/kfc-TendersFU.png" alt=""></td>
        <td>
          <input type="button" value="加入购物车" />
        </td>
      </tr>
      <tr>
        <td>AlcBreast</td>
        <td>20</td>
        <td><img src="img/kfc-AlcBreast.png" alt=""></td>
        <td>
          <input type="button" value="加入购物车" />
        </td>
      </tr>
      <tr>
        <td>AlcLeg</td>
        <td>20</td>
        <td><img src="img/kfc-AlcLeg.png" alt=""></td>
        <td>
          <input type="button" value="加入购物车" />
        </td>
      </tr>
      <tr>
        <td>AlcThigh</td>
        <td>20</td>
        <td><img src="img/kfc-AlcThigh.png" alt=""></td>
        <td>
          <input type="button" value="加入购物车" />
        </td>
      </tr>
      <tr>
        <td>AlcLeg</td>
        <td>20</td>
        <td><img src="img/kfc-AlcLeg.png" alt=""></td>
        <td>
          <input type="button" value="加入购物车" />
        </td>
      </tr>
      <tr>
        <td>AlcChLtl</td>
        <td>20</td>
        <td><img src="img/kfc-AlcChLtl.png" alt=""></td>
        <td>
          <input type="button" value="加入购物车" />
        </td>
      </tr>
      <tr>
        <td>AlcWing</td>
        <td>20</td>
        <td><img src="img/kfc-AlcWing.png" alt=""></td>
        <td>
          <input type="button" value="加入购物车" />
        </td>
      </tr>
	  <tr>
        <td>BevBucket</td>
        <td>20</td>
        <td><img src="img/kfc-BevBucket.png" alt=""></td>
        <td>
          <input type="button" value="加入购物车" />
        </td>
      </tr>
	  <tr>
        <td>Pepsi</td>
        <td>20</td>
        <td><img src="img/kfc-dietPepsi.png" alt=""></td>
        <td>
          <input type="button" value="加入购物车" />
        </td>
      </tr>
	  <tr>
        <td>drPepper</td>
        <td>20</td>
        <td><img src="img/kfc-drPepper.png" alt=""></td>
        <td>
          <input type="button" value="加入购物车" />
        </td>
      </tr>
	  <tr>
        <td>LemMed</td>
        <td>20</td>
        <td><img src="img/kfc-LemMed.png" alt=""></td>
        <td>
          <input type="button" value="加入购物车" />
        </td>
      </tr>
	  <tr>
        <td>Mtndew</td>
        <td>20</td>
        <td><img src="img/kfc-mtndew.png" alt=""></td>
        <td>
          <input type="button" value="加入购物车" />
        </td>
      </tr>
	  <tr>
        <td>Sweet Lightning</td>
        <td>20</td>
        <td><img src="img/kfc-mtndewsweetlightning.png" alt=""></td>
        <td>
          <input type="button" value="加入购物车" />
        </td>
      </tr>
	  <tr>
        <td>Diet Pepsi</td>
        <td>20</td>
        <td><img src="img/kfc-Pepsi.png" alt=""></td>
        <td>
          <input type="button" value="加入购物车" />
        </td>
      </tr>
	  <tr>
        <td>Sierramist</td>
        <td>20</td>
        <td><img src="img/kfc-sierramist.png" alt=""></td>
        <td>
          <input type="button" value="加入购物车" />
        </td>
      </tr>
	  <tr>
        <td>Sweet Tea</td>
        <td>20</td>
        <td><img src="img/kfc-sweetTea.png" alt=""></td>
        <td>
          <input type="button" value="加入购物车" />
        </td>
      </tr>
    </table>
    <h1 style="padding-top: 40px;">您的购物车</h1>
    <table id="jiesuan">
      <tr>
        <th>商品名称</th>
        <th>商品单价</th>
        <th>购买数量</th>
        <th>金额</th>
        <th>移除</th>
      </tr>
      <tr id="total">
        <td colspan="5">总价：0元</td>
      </tr>
    </table>
	</div>
</div>

<div style="text-align: center; margin-top: 20px;">
  <a class="xiamian" href="./end.html" style="border: 2px solid red; border-radius: 5px; padding: 10px 25px; text-decoration: none; color: black;">提交订单</a>
</div>

	
  <!-- footer -->
  <footer class="bd-footer py-5 mt-5 bg-white">
      <div class="container py-3">
        <div class="row">
          <div class="col-lg-3 mb-3 text-black">
            <img src="img/logo-kfc.svg" style="margin: 5px 0 0;">
            <ul class="list-unstyled">
              <li><img src="./img/download.png" alt=""></li>
              <h4 style="margin-top: 10px;">湖北-武汉</h4>
            </ul>
          </div>
          <div class="col-lg-3 mb-3 text-black">
            <h3>背后故事</h3>
            <ul class="list-unstyled">
              <li>关于KFC</li>
              <li>经营理念</li>
              <li>后勤保障</li>
              <li>保护环境</li>
            </ul>
          </div>
          <div class="col-lg-3 mb-3 text-black">
            <h3>欢迎您来</h3>
            <ul class="list-unstyled">
              <li>加盟我们</li>
              <li>您的建议</li>
              <li>意见反馈</li>
              <li>餐厅地图</li>
            </ul>
          </div>
          <div class="col-lg-3 mb-3 text-black">
            <h3>企业责任</h3>
            <ul class="list-unstyled">
              <li>以食为天</li>
              <li>以人为本</li>
              <li>以爱为先</li>
              <li>以绿为源</li>
            </ul>
          </div>
        </div>
  
        <div class="footer-row-bottom end">
          <div class="footer-columnb"><img src="img/Youtube.png" alt=""></div>
          <div class="footer-columnb"><img src="img/Twitter.png" alt=""></div>
          <div class="footer-columnb"><img src="img/TikTok.png" alt=""></div>
          <div class="footer-columnb"><img src="img/Facebook.png" alt=""></div>
          <div class="footer-columnb"><img src="img/Instagram.png" alt=""></div>
        </div>
  
        <div class="footter-icon end">
          <div class="footer-columnb"><span>Secure Payment</span></div>
          <div class="footer-columnb"><img src="img/GrabPay.png" alt=""></div>
          <div class="footer-columnb"><img src="img/Mastercard.png" alt=""></div>
          <div class="footer-columnb"><img src="img/Shopeepay.png" alt=""></div>
          <div class="footer-columnb"><img src="img/MaybankQR.png" alt=""></div>
          <div class="footer-columnb"><img src="img/Visa.png" alt=""></div>
          <div class="footer-columnb"><img src="img/Boost.png" alt=""></div>
          <div class="footer-columnb"><img src="img/TouchNGo.png" alt=""></div>
        </div>
  
        <div class="end"><span>Terms of Use
          |
          Privacy Policy
          |
          © Copyright 2022 QSR Stores Sdn. Bhd. (1098054)</span></div>
      </div>
    </footer>
      
      
      
</body>
      
      
        

  <script type="text/javascript" src="./js/jquery-3.6.0.js"></script>
  <script type="text/javascript">
    $(function () {
      //给按钮绑定事件
      $("input[value='加入购物车']").click(function () {
        //通过按钮找到所在td 通过td得到所有兄弟td
        //获取里面的第一个
        var name = $(this).parent().siblings().eq(0).text();
        var price = $(this).parent().siblings().eq(1).text();
        var tr = $("<tr></tr>");
        //添加商品名称和商品单价td
        var nametd = $("<td></td");
        nametd.text(name);
        var pricetd = $("<td></td");
        pricetd.text(price);

        //添加购买数量td
        var numtd = $(
          "<td><input type='button' value='-' onclick='numfn(-1)'><span>1</span><input type='button' value='+' onclick='numfn(1)'></td"
        );

        //添加金额
        var moneytd = $("<td></td");
        moneytd.text(price);

        //添加操作
        var deltd = $(
          "<td><input type='button' value='删除'  onclick='delfn()'></td>"
        );
        //将商品名称和单价td添加到tr中
        tr.append(nametd);
        tr.append(pricetd);
        tr.append(numtd);
        tr.append(moneytd);
        tr.append(deltd);
        //将tr装进table中
        $("#total").before(tr);
        //计算总价
        calfn();
      });
    });
    function delfn() {
      var obj = event.target || event.srcElement;
      //得到按钮所对应的tr并删除
      $(obj).parent().parent().remove();
      //计算总价
      calfn();
    }
    function numfn(x) {
      //得到原来的数值
      var obj = event.target || event.srcElement;
      var oldCount = parseInt($(obj).siblings("span").text());
      //把计算之后的值再放进去
      var newCount = oldCount + x;
      if (newCount <= 1) {
        newCount = 1;
      }
      $(obj).siblings("span").text(newCount);
      //得到单价
      var price = $(obj).parent().prev().text();
      //修改金额
      $(obj)
        .parent()
        .next()
        .text(price * newCount);
      //计算总价
      calfn();
    }
    //计算总价方法
    function calfn() {
      var total = 0;
      //得到第二个table里面所有tr并遍历
      $("#jiesuan tr").each(function () {
        //从tr中找到第四个孩子（金额td）
        var moneytd = $(this).children().eq(3);
        //从td中获取金额
        var money = parseFloat(moneytd.text());
        //排除第一行和最后一行
        if (!isNaN(money)) {
          total += money;
        }
      });
      //显示总价
      $("#total>td").text("总价：" + total + "元");
    }
  </script>
</html>
